<template>
	<section class="app-main-height">
		<router-view v-slot="{Component, route }" 
								v-if="isShow">
				<transition appear name="fade-transform" mode="out-in">
					<component :is="Component" :key="route.path"></component>
				</transition>
		</router-view>
	</section>
</template>

<script setup lang="ts">
import {nextTick, ref, watch} from "vue";
import {useSettingsStoreWithOut} from "@/stores/modules/settings";

const isShow = ref(true)
const settingsStore = useSettingsStoreWithOut()
watch(()=> settingsStore.refresh, ()=>{
	isShow.value = false
	nextTick(()=>{
		isShow.value = true
	})
})

</script>

<style scoped lang="scss">
.app-main-height {
  min-height: $base-app-main-height;

  // padding: 20px;
  background-color: inherit;
}
</style>